<template>
    <div class="container">
        <div class="body_wrap">
            <el-card shadow="hover" ref="content_card">
                <el-tabs v-model="active" @tab-click="handleClick" >
                    <el-tab-pane
                        v-for="(item, index) in tabs"
                        :key="index"
                        :label="`${item.label}`"
                        :name="item.name"
                    >
                        <component v-if="item.show" :is="item.component" :params="item.params"></component>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
import Member from "./member";
export default {
    name: "tabs",
    components: {
        Member,
    },
    data() {
        return {
            active: "visitor",
            tabs: [
                {
                    label: "游客",
                    name: "visitor",
                    show: true,
                    component: Member,
                    params: {type: 1}
                },
                {
                    label: "普通会员",
                    name: "normal",
                    show: false,
                    component: Member,
                    params: {type: 2}
                },
                {
                    label: "VIP会员",
                    name: "vip",
                    show: false,
                    component: Member,
                    params: {type: 3}
                },
                {
                    label: "业务代理",
                    name: "biz",
                    show: false,
                    component: Member,
                    params: {type: 4}
                },
                {
                    label: "代理商",
                    name: "agent",
                    show: false,
                    component: Member,
                    params: {type: 5}
                },
                {
                    label: "钻石会员",
                    name: "zhuanshi",
                    show: false,
                    component: Member,
                    params: {type: 8}
                }
            ]
        };
    },

    created() {
    },

    methods: {
        handleClick(tab) {
            /**
             * 每次换tab的时候，子组件的mounted()函数都会被触发4次。
             * 这是因为每次我们按tab的时候，都有4个子组件被渲染。
             * 所以我们要用v-if来选择渲染的组件。
             */
            this.tabs.forEach(item =>
                item.name === tab.name
                    ? (item.show = true)
                    : (item.show = false)
            );
        },

    }
};
</script>

<style lang="scss" scoped></style>
